<template>
    <div class="selectionPage">
        <div class="sub_common_bg">
            <div style="display: flex; margin: 10px auto;">
                <div style="flex: 3;">

                </div>
                <div style="flex: 9;">
                    <el-input placeholder="请选择" style="width: 500px;">
                        <i slot="prepend" class="el-icon-search"></i>
                        <template slot="append">搜索</template>
                    </el-input>
                </div>
            </div>
            <div>
                <div>
                    <table>
                        <tr>
                            <td class="select_title">
                                <label>
                                    推荐市场：
                                </label>
                            </td>
                            <td>
                                <label class="select_box" :class="{select_box_active: selectAddressNone}" @click="selectAddress = []">全部</label>
                                <label class="select_box" >
                                    <input type="checkbox" v-model="selectAddress" value="1">东欧
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selectAddress" value="2">西欧
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selectAddress" value="3">美国
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selectAddress" value="4">俄罗斯
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="cut_line"></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="select_title">
                                <label>
                                    商品标签：
                                </label>
                            </td>
                            <td>
                                <label class="select_box" :class="{select_box_active: selectMarkNone}" @click="selectMark = []">全部</label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selectMark" value="1">创新品
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selectMark" value="2">现货
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selectMark" value="3">期货
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="cut_line"></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="select_title">
                                <label>
                                    上新时间：
                                </label>
                            </td>
                            <td>
                                <label class="select_box" :class="{select_box_active: selecteDaysNone}" @click="selecteDays = []">全部</label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selecteDays" value="7">近7天
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selecteDays" value="15">近15天
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selecteDays" value="30">近30天
                                </label>
                                <label class="select_box">
                                    <input type="checkbox" v-model="selecteDays" value="50">近50天
                                </label>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div>
                <div style="display: flex;height: 60px; line-height: 60px;">
                    <div class="select_tabs">
                        <label for="">默认排序</label>
                        <label for="">预估毛利</label>
                        <label for="">最新</label>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="flex: 1;">
                        <div class="item_card">
                            <img src="./../../assets/itemIcon/001.jpg" alt="">
                            <div>独立水箱奶瓶清洗消毒机</div>
                            <div class="details_btn" @click="openItemDetail()">了解详情</div>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="item_card">
                            <img src="./../../assets/itemIcon/002.jpg" alt="">
                            <div>独立水箱奶瓶清洗消毒机</div>
                            <div class="details_btn" @click="openItemDetail()">了解详情</div>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="item_card">
                            <img src="./../../assets/itemIcon/003.jpg" alt="">
                            <div>独立水箱奶瓶清洗消毒机</div>
                            <div class="details_btn" @click="openItemDetail()">了解详情</div>
                        </div>
                    </div>
                </div>
                <div style="display: flex; margin-top: 20px;">
                    <div style="flex: 1;">
                        <div class="item_card">
                            <img src="./../../assets/itemIcon/004.jpg" alt="">
                            <div>独立水箱奶瓶清洗消毒机</div>
                            <div class="details_btn" @click="openItemDetail()">了解详情</div>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="item_card">
                            <img src="./../../assets/itemIcon/005.jpg" alt="">
                            <div>独立水箱奶瓶清洗消毒机</div>
                            <div class="details_btn" @click="openItemDetail()">了解详情</div>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="item_card">
                            <img src="./../../assets/itemIcon/006.jpg" alt="">
                            <div>独立水箱奶瓶清洗消毒机</div>
                            <div class="details_btn" @click="openItemDetail()">了解详情</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 50px; width: 100%;">

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'selectionPage',
    data() {
        return {
            selectAddress: [],
            selectAddressNone: true,
            selectMark: [],
            selectMarkNone: true,
            selecteDays: [],
            selecteDaysNone: true
        }
    },
    watch: {
        "selectAddress.length"(newLen, oldLen) {
            if(newLen === 0) {
                this.selectAddressNone = true
            } else {
                this.selectAddressNone = false
            }
        },
        "selectMark.length"(newLen, oldLen) {
            if(newLen === 0) {
                this.selectMarkNone = true
            } else {
                this.selectMarkNone = false
            }
        },
        "selecteDays.length"(newLen, oldLen) {
            if(newLen === 0) {
                this.selecteDaysNone = true
            } else {
                this.selecteDaysNone = false
            }
        },
    },
    mounted() {
    },
    methods: {
        // 打开商品明细
        openItemDetail() {
            const newPageUrl = "/home/itemDetail?id="+Math.fround(Math.random()*9999);
            window.open(newPageUrl, '_blank');
        },
    }
}
</script>
<style scoped>
.type_list_active {
    background-color: var(--color-base);
    color: var(--color-common-ff);
    font-weight: bold;
}
.all_list_dlg_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-common-ff);
    z-index: 999;
    border: 1px solid var(--color-base);
}
.list_title {
    color: var(--color-base);
    font-size: 16px;
    margin-bottom: 15px;
}
.list_name {
    font-size: 14px;
    padding-right: 20px;
    cursor: pointer;
}
.item_card {
    width: 300px;
    height: 340px;
    background-color: var(--color-common-f2);
    margin: 0 auto;
}
.item_card div {
    text-align: center;
}
.item_card img {
    width: 200px;
    height: 200px;
    margin: 20px 50px;
}
.details_btn {
    width: 100px;
    height: 28px;
    line-height: 28px;
    margin: 20px auto;
    text-align: center;
    font-size: 16px;
    background-color: var(--color-base);
    color: var(--color-common-ff);
    border: 1px solid var(--color-base);
    border-radius: 15px;
}
.details_btn:hover {
    cursor: pointer;
}
.cut_line {
    width: 1160px;
    height: 1px;
    margin: 5px 0;
    background-color: var(--color-common-f2);
}
.select_title {
    width: 120px;
    height: 60px;
    line-height: 60px;
    font-size: var(--fontsize-14);
}
.select_box {
    padding: 0 20px;
    line-height: 60px;
    font-size: var(--fontsize-14);
}
.select_box_active {
    color: var(--color-base);
}
.select_box input {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    vertical-align: middle;
}
.select_box input:checked {
    background-color: var(--color-base);
    border-color: var(--color-base);
}
.select_tabs label {
    padding-right: 40px;
    line-height: 60px;
    font-size: var(--fontsize-14);
}
</style>